<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : !disabled ? '修改' : '查看商品详情'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             inline label-width="120px">
      <el-tabs tab-position="left">
        <el-tab-pane label="通用信息">
          <el-form-item label="店铺" prop="shopsId" v-if="dataForm.shopsGoodsId ">
            <el-select v-model="dataForm.shopsId" :disabled="disabled" clearable filterable placeholder="店铺名称"
                       class="width185">
              <el-option
                v-for="shops in shopsList"
                :key="shops.id"
                :label="shops.name"
                :value="shops.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="dataForm.name" :disabled="disabled" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item label="商品编号" prop="goodsSn">
            <el-input v-model="dataForm.goodsSn" :disabled="disabled" placeholder="编号"></el-input>
          </el-form-item>
          <el-form-item label="商品类型" prop="categoryId">
            <el-select v-model="dataForm.categoryId" :disabled="disabled" clearable filterable placeholder="请选择"
                       class="width185">
              <el-option
                v-for="category in categorys"
                :key="category.id"
                :label="category.name"
                :value="category.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="dataForm.thirdSysNumber-0 ===1001" label="商品标签" prop="thirdLabel">
              <el-select  v-model="dataForm.thirdLabel" placeholder="请选择"
                         filterable
                         @change="onLabelChange"
                          :disabled="disabled">
                <el-option
                  v-for="item in thirdLabelList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>

          <el-form-item label="商品属性" prop="goodsType">
            <el-dict code="GOODS_TYPES" :disabled="disabled" v-model="dataForm.goodsType"></el-dict>
<!--            <el-select v-model="dataForm.goodsType" :disabled="disabled" filterable placeholder="请选择"-->
<!--                       class="width185">-->
<!--              <el-option-->
<!--                v-for="type in [{name:'实物',id:0},{name:'电子卡券',id:1},{name:'虚拟卡',id:4},{name:'联联商品',id:2},{name:'卡包',id:3}]"-->
<!--                :key="type.id"-->
<!--                :label="type.name"-->
<!--                :value="type.id">-->
<!--              </el-option>-->
<!--            </el-select>-->
          </el-form-item>
          <el-form-item  v-if="dataForm.goodsType == 1" label="是否通用代金券" prop="setMeal">
            <el-select v-model="dataForm.setMeal" :disabled="disabled"  placeholder="请选择"
                       class="width185">
              <el-option
                v-for="type in [{name:'否',id:0},{name:'是',id:1}]"
                :key="type.id"
                :label="type.name"
                :value="type.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="卡券有效期" prop="expireDay" v-if="dataForm.goodsType == 1">
            <el-input v-model="dataForm.expireDay" :disabled="disabled" placeholder="卡券有效期"></el-input>
          </el-form-item>
          <el-form-item label="商品库存" prop="goodsNumber">
            <el-input v-model="dataForm.goodsNumber" :disabled="disabled" placeholder="商品库存"></el-input>
          </el-form-item>
          <el-form-item label="是否热销" prop="isHot">
            <el-dict code="IS_NOT" :disabled="disabled" v-model="dataForm.isHot"></el-dict>
          </el-form-item>
          <el-form-item label="是否上架" prop="isOnSale">
            <el-dict code="IS_NOT" :disabled="disabled" v-model="dataForm.isOnSale"></el-dict>
          </el-form-item>
          <el-form-item label="是否新商品" prop="isNew">
            <el-dict code="IS_NOT" :disabled="disabled" v-model="dataForm.isNew"></el-dict>
          </el-form-item>
          <el-form-item label="限购" prop="isLimited">
            <el-input v-model="dataForm.isLimited" :disabled="disabled" placeholder="限购数量，0为不限购"></el-input>
          </el-form-item>
          <el-form-item label="列表图" prop="listPicUrl">
            <el-img v-model="dataForm.listPicUrl" :disabled="disabled">
            </el-img>
          </el-form-item>
          <el-form-item label="关键词" prop="keywords">
            <el-input v-model="dataForm.keywords" :disabled="disabled" placeholder="关键词"></el-input>
          </el-form-item>
          <el-form-item label="简明介绍" prop="goodsBrief">
            <el-input v-model="dataForm.goodsBrief" :disabled="disabled" placeholder="简明介绍"></el-input>
          </el-form-item>
          <el-form-item label="兑换所需积分" prop="customerIntegral">
            <el-input v-model="dataForm.customerIntegral" :disabled="disabled" placeholder="兑换所需积分"></el-input>
          </el-form-item>
          <el-form-item label="市场价" prop="marketPrice">
            <el-input v-model="dataForm.marketPrice" :disabled="disabled" placeholder="市场价"></el-input>
          </el-form-item>
          <el-form-item label="售价" prop="retailPrice">
            <el-input v-model="dataForm.retailPrice" :disabled="disabled" placeholder="售价"></el-input>
          </el-form-item>
          <el-form-item label="进价" prop="unitPrice">
            <el-input v-model="dataForm.unitPrice" :disabled="disabled" placeholder="进价"></el-input>
          </el-form-item>
          <el-form-item label="推广标签" prop="promotionTag">
            <el-input v-model="dataForm.promotionTag" :disabled="disabled" placeholder="推广标签"></el-input>
          </el-form-item>
          <el-form-item label="推广描述" prop="promotionDesc">
            <el-input v-model="dataForm.promotionDesc" :disabled="disabled" placeholder="推广描述"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort" >
            <el-input-number v-model="dataForm.sort" :min="1" :max="999999":disabled="disabled"  placeholder="排序"></el-input-number>
          </el-form-item>
          <el-form-item label="微信优惠标识" prop="goodsTag">
            <el-input v-model="dataForm.goodsTag" :disabled="disabled" placeholder="微信优惠标识"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="商品参数">
          <div v-for="(item,index) in dataForm.goodsAttributeEntityList">
            <el-row>
              <el-col :span="10">
                <el-form-item label="属性">
                  <el-select v-model="item.attributeId" :disabled="disabled" clearable filterable placeholder="请选择"
                             class="width185">
                    <el-option v-for="attribute in attributes"
                               :value="attribute.id"
                               :label="attribute.name"
                               :key="attribute.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="值">
                  <el-input type="text" :disabled="disabled" v-model="item.value"/>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="min-width: 95px;">
                <el-button type="warning" :disabled="disabled" icon="el-icon-plus" v-if="index == 0" @click="addAttrRow"
                           circle></el-button>
                <el-button type="danger" :disabled="disabled" icon="el-icon-delete" @click="delAttrRow(index)"
                           circle></el-button>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="商品规格" v-if="dataForm.goodsType==0">
          <div v-for="(item,index) in dataForm.specificationEntityList">
            <el-row>
              <el-col :span="10">
                <el-form-item label="名称">
                  <el-input type="text" :disabled="disabled" v-model="item.name"/>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="排序">
                  <el-input type="text" :disabled="disabled" v-model="item.sort"/>
                </el-form-item>
              </el-col>
              <el-col :span="3" style="min-width: 95px;">
                <el-button type="warning" :disabled="disabled" icon="el-icon-plus" v-if="index == 0" @click="addSpeRow"
                           circle></el-button>
                <el-button type="danger" :disabled="disabled" icon="el-icon-delete" @click="delSpeRow(index)"
                           circle></el-button>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane label="详细描述">
          <el-upload
            :disabled="disabled"
            class="upload-demo"
            :action="url"
            :on-remove="handleRemove"
            :before-upload="beforeUploadHandle"
            :on-success="successHandle"
            :file-list="dataForm.attachmentEntityList"
            list-type="picture-card">
            <el-button v-if="!disabled" size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-button type="success" @click="openDetail">预览详情</el-button>
          <ueditor v-model="dataForm.goodsDesc" :disabled="disabled" placeholder="商品描述"></ueditor>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>

  export default {
    data () {
      let validateExpire = (rule, value, callback) => {
        if (this.dataForm.goodsType == 1) {
          if (!value || value == '') {
            callback(new Error('请输入卡券有效天数'));
            return
          }
        }
        callback()
      }
      let validateShops = (rule, value, callback) => {
        if (this.dataForm.shopsGoodsId) {
          if (!value || value == '') {
            callback(new Error('请选择店铺'));
            return
          }
        }
        callback()
      }
      return {
        url: '',
        disabled: false,
        visible: false,
        thirdSysNumber:"",
        thirdLabelList:[],
        dataForm: {
          id: '',
          name: '',
          isOnSale: '',
          customerIntegral: '',
          branchIntegral: '',
          categoryId: '',
          goodsSn: '',
          brandId: '',
          goodsNumber: '',
          goodsType: 1,
          isHot: '',
          isNew: '',
          isLimited: '',
          isDelete: '',
          primaryPicUrl: '',
          listPicUrl: '',
          keywords: '',
          goodsBrief: '',
          unitPrice: '',
          marketPrice: '',
          retailPrice: '',
          counterPrice: '',
          extraPrice: '',
          sellVolume: '',
          isAppExclusive: '',
          appExclusivePrice: '',
          goodsDesc: '',
          sort: '',
          promotionTag: '',
          promotionDesc: '',
          createUserId: '',
          createTime: '',
          createUserDeptId: '',
          updateUserId: '',
          updateTime: '',
          thirdLabel: '',
          thirdSysNumber:'',
          attachmentEntityList: [],

          specificationEntityList: [{
            'id': '',
            'goodsId': '',
            'name': '',
            'sort': ''
          }],
          goodsAttributeEntityList: [{
            'id': '',
            'goodsId': '',
            'attributeId': '',
            'value': ''
          }]
        },
        dataRule: {
          expireDay: [
            {
              validator: validateExpire,
              trigger: 'blur'
            }
          ],
          shopsId: [
            {
              validator: validateShops,
              trigger: 'blur'
            }
          ],
          name: [
            {
              required: true,
              message: '名称不能为空',
              trigger: 'blur'
            }
          ],
          goodsSn: [
            {
              required: true,
              message: '商品编码不能为空',
              trigger: 'blur'
            }
          ],
          categoryId: [
            {
              required: true,
              message: '请选择商品类型',
              trigger: 'blur'
            }
          ],
          goodsType: [
            {
              required: true,
              message: '请选择商品属性',
              trigger: 'blur'
            }
          ],
          goodsNumber: [
            {
              required: true,
              message: '库存不能为空',
              trigger: 'blur'
            }
          ],
          isLimited: [
            {
              required: true,
              message: '请填写限购数量',
              trigger: 'blur'
            }
          ],
          customerIntegral: [
            {
              required: true,
              message: '兑换积分不能为空',
              trigger: 'blur'
            }
          ],
          retailPrice: [
            {
              required: true,
              message: '零售价格不能为空',
              trigger: 'blur'
            }
          ]
        },
        categorys: [],
        brands: [],
        shopsList: [],
        attributes: []
      }
    },
    methods: {
      openDetail () {
        this.$alert(`<div style="width: 360px;height: 720px;overflow-y: auto;overflow-x: hidden"">${this.dataForm.goodsDesc}</div>`, this.dataForm.name, {
          dangerouslyUseHTMLString: true,
          closeOnClickModal: true,
          callback: action => {
          }
        })
      },
      handleChange(value) {

      },
      init (id, disabled, shopsGoodsId) {
        this.url = this.$http.BASE_URL + `/sys/oss/upload?token=${this.$cookie.get('token')}`
        this.disabled = disabled
        this.dataForm.id = id || ''
        this.visible = true
        //this.getLlLabel()
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: `/mall/goods/info/${this.dataForm.id}`,
              method: 'get'
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.dataForm = data.goods
                if (data.goods.goodsAttributeEntityList.length > 0) {
                  this.dataForm.goodsAttributeEntityList = data.goods.goodsAttributeEntityList
                } else {
                  this.dataForm.goodsAttributeEntityList = [{
                    'id': '',
                    'goodsId': this.dataForm.id,
                    'attributeId': '',
                    'value': ''
                  }]
                }
                if (data.goods.specificationEntityList.length > 0) {
                  this.dataForm.specificationEntityList = data.goods.specificationEntityList
                } else {
                  this.dataForm.specificationEntityList = [{
                    'id': '',
                    'goodsId': this.dataForm.id,
                    'attributeId': '',
                    'value': ''
                  }]
                }
              }
            })
          } else {
            this.dataForm = {
              id: '',
              name: '',
              categoryId: '',
              goodsSn: '',
              brandId: '',
              goodsNumber: '',
              isHot: '',
              isNew: '',
              isLimited: '',
              isDelete: '',
              primaryPicUrl: '',
              listPicUrl: '',
              keywords: '',
              goodsBrief: '',
              unitPrice: '',
              marketPrice: '',
              retailPrice: '',
              counterPrice: '',
              extraPrice: '',
              sellVolume: '',
              isAppExclusive: '',
              appExclusivePrice: '',
              goodsDesc: '',
              sort: '',
              promotionTag: '',
              promotionDesc: '',
              createUserId: '',
              createTime: '',
              createUserDeptId: '',
              updateUserId: '',
              updateTime: '',
              attachmentEntityList: [],
              specificationEntityList: [{
                'id': '',
                'goodsId': '',
                'name': '',
                'sort': ''
              }],
              goodsAttributeEntityList: [{
                'id': '',
                'goodsId': '',
                'attributeId': '',
                'value': ''
              }]
            }
          }
          this.dataForm.shopsGoodsId = shopsGoodsId || ''
          console.log(this.dataForm.shopsGoodsId)
        })

      },
      delAttrRow: function (index) {
        // 最后一行时禁止删除
        if (this.dataForm.goodsAttributeEntityList.length === 1) {
          return
        }
        this.dataForm.goodsAttributeEntityList.splice(index, 1)
      },
      addAttrRow: function () {
        let goodsId = ''
        if (this.dataForm) {
          goodsId = this.dataForm.id
        }
        this.dataForm.goodsAttributeEntityList.push({
          'id': '',
          'goodsId': goodsId,
          'attributeId': '',
          'value': ''
        })
      },
      delSpeRow: function (index) {
        // 最后一行时禁止删除
        if (this.dataForm.specificationEntityList.length === 1) {
          return
        }
        this.dataForm.specificationEntityList.splice(index, 1)
      },
      addSpeRow: function () {
        let goodsId = ''
        if (this.dataForm.goods) {
          goodsId = this.dataForm.goods.id
        }
        this.dataForm.specificationEntityList.push({
          'id': '',
          'goodsId': goodsId,
          'name': '',
          'sort': ''
        })
      },
      handleRemove (file, fileList) {
        this.dataForm.attachmentEntityList = fileList
      },
      // 上传之前
      beforeUploadHandle (file) {
        if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
          this.$message.error('只支持jpg、png、gif格式的图片！')
          return false
        }
      },
      onLabelChange(){
        this.dataForm.thirdLabelList.forEach(element =>{
          if(element.value==e){
            this.dataForm.thirdLabel=element.value;
          }
        })
      },
      // 上传成功
      successHandle (response, file, fileList) {
        if (response && response.code === 0) {
          this.dataForm.attachmentEntityList.push({
            name: file.name,
            url: response.url
          })
        } else {
          this.$message.error(response.msg)
        }
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm']
          .validate((valid) => {
            if (valid) {
              this.$http({
                url: `/mall/goods/${!this.dataForm.id ? 'save' : 'update'}`,
                method: 'post',
                data: this.dataForm
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500
                  })
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            }
          })
      }
    },
    created () {
      this.$http({
        url: `/mall/category/queryAll`,
        method: 'get',
        params: {
          'level': 2,
          'isShow': 1
        }
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.categorys = data.list
        }
      })
      this.$http({
        url: `/mall/brand/queryAll`,
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.brands = data.list
        }
      })
      this.$http({
        url: `/mall/attribute/queryAll`,
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.attributes = data.list
        }
      })
      this.$http({
        url: '/mall/shops/queryAllSimple',
        method: 'get',
        params: {
          level: 1
        }
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.shopsList = data.list
        } else {
          this.shopsList = []
        }
      })
    }
  }
</script>
<style>
  .el-dialog {
    width: 70%;
    min-width: 920px;
  }
</style>
